<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<div class="topKnow f f-a-c f-j-b m1280">
			<div class="myClu">My club</div>
			<div @click="router.push('/KnowClubAreateAClub')" class="creatr hand">+ Create a Club</div>
		</div>
		<div class="Box m1280">
			<div v-for="(item, index) in list" :key="index" class="itemBox f f-a-c">
				<div class="leftItem f">
					<div class="club">
						<div class="title">Club name</div>
						<div class="imgAn f f-a-c">
							<img :src="item.clubImage" style="object-fit: cover" alt="" />
							{{ item.clubName }}
						</div>
					</div>
					<div class="industry">
						<div class="titles">Industry</div>
						<div class="count">{{ item.industryName }}</div>
					</div>
					<div class="tags">
						<div class="titles">Tags</div>
						<div class="tagsList f f-a-c f-w-w f-j-c">
							<div v-for="(ite, ind) in item.tags" :key="ind" class="tagItem">{{ ite }}</div>
							<!-- <div class="tagItem">Data</div>
							<div class="tagItem">Code review</div> -->
						</div>
					</div>
					<div class="fans">
						<div class="titles">Fans</div>
						<div class="qian">{{ item.clubFans || 0 }}</div>
					</div>
					<div class="Price">
						<div class="titles f f-a-c f-j-c">Price <img src="/src/assets/user/wen.png" alt="" /></div>
						<div class="qian">${{ item.subscription || 0 }}/Mo<br />{{ item.discountMonths ? "(offer:$" + item.discount + "/" + item.discountMonths + "Months)" : "" }}</div>
					</div>
					<div class="Prices">
						<div class="titles f f-a-c f-j-c">income <img src="/src/assets/user/wen.png" alt="" /></div>
						<div class="qian">${{ item.income || 0 }}</div>
					</div>
				</div>
				<div class="rigBtn f f-a-c">
					<div @click="detile(item)" class="detele hand">Delete</div>
					<div @click="goDetils(item)" class="edit hand">Edit</div>
				</div>
			</div>
		</div>
		<el-dialog v-model="deteleVisible" title="" width="20%">
			<div class="deleteDloing">Delete this club？</div>
			<div class="countDing">The deleted content cannot be recovered</div>
			<div class="doingBtn f f-a-c f-j-b">
				<div @click="deteleVisible = false" class="lefBtn hand">Cancel</div>
				<div @click="detlel" class="rigBtn hand">Delete</div>
			</div>
		</el-dialog>
		<div style="margin-bottom: 80px" class="hand">
			<div class="example-pagination-block f f -a-c f-j-c">
				<el-pagination @size-change="sizeChange" :default-page-size="5" @current-change="currentChange" layout="prev, pager, next" :total="total" />
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import { ElMessage } from "element-plus";
	import { ListClubsCreated, DeleteAClub } from "@/api/knowClub/index.js";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let deteleVisible = ref(false);
	let pageNum = ref(1);
	let detItem = ref({});
	let list = ref([]);
	let total = ref(0);
	onMounted(() => {
		myListCoubl();
		window.addEventListener("scroll", handleScroll);
	});
	const myListCoubl = async () => {
		let n = await ListClubsCreated({ pageNum: pageNum.value });
		total.value = n.data.total;
		list.value = n.data.list;
	};
	const detlel = async () => {
		let n = await DeleteAClub({ clubId: detItem.value.id });
		if (n.code == 200) {
			ElMessage.success(n.msg);
			deteleVisible.value = false;
		}
		myListCoubl();
	};
	const detile = async item => {
		detItem.value = item;
		deteleVisible.value = true;
	};
	const goDetils = item => {
		router.push({
			path: "/KnowClubAreateAClub",
			query: {
				clubId: item.id
			}
		});
	};
	const currentChange = e => {
		pageNum.value = e;
		myListCoubl();
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
	::v-deep .el-pager li:hover {
		color: #000000 !important;
	}
	::v-deep .el-pager li.is-active {
		color: #000000 !important;
	}
	::v-deep .el-pagination button:hover {
		color: #000000 !important;
	}
	::v-deep .el-pager li {
		font-size: px(24) !important;
		margin: 0 8px;
	}
	::v-deep .el-pagination .btn-next .el-icon {
		font-size: 20px !important;
	}
	::v-deep .el-pagination .btn-prev .el-icon {
		font-size: 20px !important;
	}
</style>
